<template>
  <div>
    <div
      v-if="!isNoAction"
      class="ctl-box"
      :style="{
        'justify-content': 'space-evenly',
      }"
    >
      <bs-add-icon
        v-if="addShow"
        class="bs-icon hover-effect"
        @click.native="plusClick"
      ></bs-add-icon>
      <bs-remove-icon
        v-if="removeShow"
        @click.native="removeClick"
        class="bs-icon hover-effect"
      />
      <bs-edit-icon
        v-if="editShow"
        @click.native="editClick"
        class="bs-icon hover-effect"
      />
      <bs-refresh-icon
        v-if="refreshShow"
        @click.native="refreshClick"
        class="bs-icon hover-effect"
      />
    </div>
    <el-tree
      :data="treeData"
      node-key="id"
      :filter-node-method="filterNode"
      :default-checked-keys="defaultCheckedKeys"
      :show-checkbox="showCheckbox"
      :props="defaultProps"
      :expand-on-click-node="false"
      @refresh-node="refreshNode"
      @node-click="nodeClick"
      :draggable="false"
      :highlight-current="true"
      :filter-visible="false"
      :context-menu-visible="contextMenuVisible"
      :context-menu-data="contextMenuData"
      ref="asyncTree"
    ></el-tree>
  </div>
</template>

<script>
export default {
  props: {
    addShow: {
      type: Boolean,
      default: true,
    },
    removeShow: {
      type: Boolean,
      default: true,
    },
    editShow: {
      type: Boolean,
      default: true,
    },
    refreshShow: {
      type: Boolean,
      default: true,
    },
    showCheckbox: {
      type: Boolean,
      default: false,
    },
    operationVisible: {
      type: Boolean,
      default: false,
    },
    contextMenuVisible: {
      type: Boolean,
      default: false,
    },
    isNoAction: {
      type: Boolean,
      default: false,
    },
    treeData: {
      type: Array,
      default() {
        return []
      },
    },
    defaultCheckedKeys: {
      type: Array,
      default() {
        return []
      },
    },
    contextMenuData: {
      type: Array,
      default() {
        return []
      },
    },
    treeLoading: {
      type: Boolean,
      default: false,
    },
    isCanCheck: {
      type: Boolean,
      default: false,
    },
    defaultProps: {
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {
      menuVisible: false,

      treeNode: {},
    }
  },
  computed: {
    isOneShow() {
      const count =
        this.addShow + this.editShow + this.removeShow + this.refreshShow
      return count === 1
    },
  },
  components: {},

  mounted() {
    this.$nextTick(() => {})
  },
  methods: {
    // 过滤树
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleRightSelect(v) {
      console.log('----v', v)
    },
    plusClick() {
      var arr = Object.keys(this.treeNode)
      if (arr.length === 0) {
        this.$alert('提示', '请选择一个用户分组节点')
        return
      }
      let params = {
        level: this.treeNode.level + 1,
        parentId: this.treeNode.id,
      }
      this.$prompt('添加分组', '请输入分组名称').then((data) => {
        if (data) {
          params.name = data
          this.$store.dispatch('system/addUserGroup', params).then((res) => {
            //TODO  刷新节点
            console.log('刷新节点')
            this.$emit('refresh-tree')
          })
        }
      })
    },
    removeClick() {
      console.log('移除目录')
      var arr = Object.keys(this.treeNode)
      if (arr.length === 0) {
        this.$alert('提示', '请选择一个用户分组节点')
        return
      }
      if (this.treeNode.level == 1) {
        this.$alert('提示', '此目录不可操作')
        return
      }
      let params = {
        id: this.treeNode.id,
      }
      this.$confirm('提示', '是否确认删除？').then((bool) => {
        if (bool) {
          this.$store.dispatch('system/delUserGroup', params).then((res) => {
            if (res) {
              this.$success('del')
              //TODO  刷新节点
              this.$emit('refresh-tree', Number(this.treeNode.parentId))
            }
          })
        }
      })
    },
    editClick() {
      console.log('编辑目录')
      var arr = Object.keys(this.treeNode)
      if (arr.length === 0) {
        this.$alert('提示', '请选择一个用户分组节点')
        return
      }
      if (this.treeNode.level == 1) {
        this.$alert('提示', '此目录不可操作')
        return
      }
      let params = {
        id: this.treeNode.id,
        level: this.treeNode.level,
        parentId: this.treeNode.parentId,
      }
      this.$prompt('分组名修改', this.treeNode.name).then((data) => {
        if (data) {
          params.name = data
          this.$store.dispatch('system/updateUserGroup', params).then((res) => {
            //TODO  刷新节点
            console.log('刷新节点')
            this.$emit('refresh-tree')
          })
        }
      })
    },
    refreshClick() {
      this.$emit('refresh-tree')
      console.log('刷新目录')
    },
    // 刷新节点
    refreshNode(id) {
      let node = this.$refs.asyncTree.getNode(id)
      console.log(node, '********111*******')
      this.$emit('refresh-node', node)
    },
    updateSelectNode() {
      this.$nextTick(() => {
        this.$refs.asyncTree.setCurrentKey(1)
        const node = this.$refs.asyncTree.getNode(1)
        this.treeNode = node
        this.$emit('node-click', node)
      })
    },
    // 点击节点
    nodeClick(node) {
      this.treeNode = node
      console.log('nodeClick  = ' + JSON.stringify(this.treeNode))
      this.$emit('node-click', node)
    },
  },
  handleRightSelect(key) {
    this.menuVisible = false
    // 调用父组件的方法
    this.$emit('select', key)
  },
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';
.ctl-box {
  line-height: 1.15;
  display: flex;
  align-items: center;
  border-bottom: 1px solid $bg-dc;
  padding-bottom: 15px;
  padding-left: 10px;
  margin: 0;
}

</style>